import { View, Text, StyleSheet, Pressable } from 'react-native';
import { px2dp } from '../../../utils/pixel-adapter';

export function Card(props) {
    const { title, rightDesc, children } = props;

    return (
        <View style={props.style}>
            <View style={styles.header}>
                <Text style={styles.title}>{title}</Text>
                <Pressable>
                    <Text style={styles.rightDesc}>{rightDesc}</Text>
                </Pressable>
            </View>
            <View style={{ marginTop: 15 }}>
                {children}
            </View>
        </View>
    );
}


const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    title: {
        fontSize: px2dp(20),
        color: 'white',
    },
    rightDesc: {
        fontSize: px2dp(14),
        color: '#a1a1aa',
    },
})